<div ng-init="init();" class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header mobile-dialog MaterialStation-dialog">
    <div class="kmi-header-row MaterialStation_header">
        <!-- 料站表標題 MaterialStation_title -->
        <div class="header-title MaterialStation_title" ng-bind="'SMT02.materialStation_service.compare' | translate"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content">
        <!-- 料站表內容 MaterialStation_main -->
        <div class="kmi-layout-page" style="padding: 0px;">
            <div class="MaterialStation_main" style="border-bottom:1px #cecece solid; padding-top: 8px;">
                <div class="kmi-row-fields main_fields">
                    <div class="column-item">
                        <label class="label main_item" ng-bind="'SMT02.materialStation_service.plot_no' | translate"></label>
                        <label class="value" ng-bind="dialog.data.plot_no"></label>
                    </div>
                </div>
                <div class="kmi-row-fields main_fields">
                    <div class="column-item">
                        <label class="label main_item" ng-bind="'SMT02.materialStation_service.product_no' | translate"></label>
                        <label class="value" ng-bind="dialog.data.product_no"></label>
                    </div>
                </div>
                <div class="kmi-row-fields main_fields">
                    <div class="column-item">
                        <label class="label main_item" ng-bind="'SMT02.materialStation_service.item_spec' | translate"></label>
                        <label class="value" ng-bind="dialog.data.item_spec"></label>
                    </div>
                </div>
            </div>
            <div class="kmi-list">
                <div class="kmi-list__header">
                    <div class="kmi-list__column" style="flex: 0 0 100px;" ng-bind="'SMT02.materialStation_service.slot_no' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT02.materialStation_service.slot_state' | translate"></div>
                    <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT02.materialStation_service.remain_time' | translate"></div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row" ng-repeat="item in dialog.MaterialStationList" ng-class = "{'clock-warning': (+item.remain_time) != -0.1 && (+item.remain_time) <= 0}">
                        <div class="kmi-list__column" style="flex: 0 0 100px;" ng-bind="item.slot_no"></div>
                        <div class="kmi-list__column" style="flex: 1;" ng-bind="item.slot_state"></div>
                        <div class="kmi-list__column" style="flex: 1; display:flex;justify-content:space-evenly">
                            <div class="material_clock" ng-class="{'clock-green': (+item.remain_time) > 60,'clock-yellow': (+item.remain_time) < 60 && (+item.remain_time) > 30,'clock-red': (+item.remain_time) < 30 && (+item.remain_time) > 0}"></div>
                            <label ng-bind="item.remain_time!='-0.1'?item.remain_time + '(Min.)':''" style='line-height: 25px;text-align: center;'></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div>
</div>
